<template>
    <div>
        <div class="detail_container" v-loading="isLoading">

            <div class="detail_title">
                <h3>{{ emailDetailInfo.title || '-' }}</h3>
            </div>

            <div class="detail_item">
                <span>发件人：</span>
                <el-tag type="warning">{{ emailDetailInfo.senderName || '-' }}</el-tag>
            </div>

            <div class="detail_item">
                <span>时间：</span>
                <p>{{ emailDetailInfo.sendTime ? formatDate.dateTimeAllFormat( emailDetailInfo.sendTime) : '-' }}</p>
            </div>

            <div class="detail_item">
                <span>收件人：</span>
                <div style="width: 850px;">
                    <el-tag v-for="item in emailDetailInfo.receiversList" class="margin-right-sm margin-bottom-sm">{{ item }}</el-tag>
                </div>
            </div>

            <div class="detail_item" v-if="emailDetailInfo.ccList && emailDetailInfo.ccList.length">
                <span>抄送人：</span>
                <div style="width: 850px;">
                    <el-tag v-for="item in emailDetailInfo.ccList" class="margin-right-sm margin-bottom-sm">{{ item }}</el-tag>
                </div>
            </div>

            <div class="detail_content">
                <div class="content">
                    <div v-html="emailDetailInfo.richText" class="ql-editor"></div>
                </div>
            </div>

            <div class="file_list" v-if="emailDetailInfo.fileList && emailDetailInfo.fileList.length">
                <h3>附件信息</h3>
                <ul>
                    <li v-for="fItem in emailDetailInfo.fileList" class="flex margin-bottom-sm file_item">
                        <i class="icon-base icon-base-appendix" 
                            style="font-size: 20px;margin-top: 2px;color: #27A3FF;margin-right: 10px;"></i>
                        <p style="width: 450px;color: #999;font-size: 14px;">{{ fItem.name }}</p>
                        <el-button link type="primary" @click="downLoadFile(fItem)">下 载</el-button>
                    </li>
                </ul>
            </div>
            <div class="quote_email" v-if="emailDetailInfo.quoteMailId">
                <h3>引用邮件</h3>
                <div class="width-all margin-bottom-md">
                    <el-button link type="primary">
                        <i class="icon-base icon-base-quote margin-right-sm"></i>{{ emailQuoteDetailInfo.title }}
                    </el-button>
                    <el-button link type="primary" class="margin-left-md" @click="isShowQuoteContent = !isShowQuoteContent">
                        <i :class="[ 'icon-base margin-right-sm', !isShowQuoteContent ? ' icon-base-arrow-down-bold' : 'icon-base-arrow-up-bold' ]"></i>
                        {{ !isShowQuoteContent ? '展开' : '收起' }}
                    </el-button>
                </div>
                <div style="border: 1px solid #eee;padding: 10px;width: 100%;" v-if="isShowQuoteContent">
                    <div class="detail_item">
                        <span>发件人：</span>
                        <el-tag type="warning">{{ emailQuoteDetailInfo.senderName || '-' }}</el-tag>
                    </div>
                    <div class="detail_item">
                        <span>时间：</span>
                        <p>{{ formatDate.dateTimeAllFormat( emailQuoteDetailInfo.sendTime || '') }}</p>
                    </div>
                    <div class="detail_item">
                        <span>收件人：</span>
                        <div style="width: 800px;">
                            <el-tag v-for="item in emailQuoteDetailInfo.receiversList" class="margin-right-sm margin-bottom-sm">{{ item }}</el-tag>
                        </div>
                    </div>
                    <div class="detail_item" v-if="emailQuoteDetailInfo.ccList && emailQuoteDetailInfo.ccList.length">
                        <span>抄送人：</span>
                        <div style="width: 800px;">
                                <el-tag v-for="item in emailQuoteDetailInfo.ccList" class="margin-right-sm margin-bottom-sm">{{ item }}</el-tag>
                            </div>
                    </div>
                    <div class="detail_content">
                        <div class="content">
                            <div v-html="emailQuoteDetailInfo.richText" class="ql-editor"></div>
                        </div>
                    </div>
                    <div class="file_list" v-if="emailQuoteDetailInfo.fileList && emailQuoteDetailInfo.fileList.length">
                        <h3>附件信息</h3>
                        <ul>
                            <li v-for="fItem in emailQuoteDetailInfo.fileList" class="flex margin-bottom-sm file_item">
                                <i class="icon-base icon-base-appendix" 
                                    style="font-size: 20px;margin-top: 2px;color: #27A3FF;margin-right: 10px;"></i>
                                <p style="width: 450px;color: #999;font-size: 14px;">{{ fItem.name }}</p>
                                <el-button link type="primary" @click="downLoadFile(fItem)">下 载</el-button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
    import { onMounted, ref } from "vue"
    import { formatDate } from "@/utils/fomart"
    import { readEmailDetail } from "@/api/email.js"
    const route = useRoute();
    const isLoading = ref(false);
    const emailDetailInfo = ref({richText: '<p></p>'});
    const dataReorganization = (detailInfo) => {
        let detailData = {
            id: detailInfo.id || '',
            title: detailInfo.title || '-',
            richText: detailInfo.content || '<p></p>',
            sender: detailInfo.sender || '-',
            senderName: detailInfo.senderName || '-',
            sendTime: detailInfo.sendTime || new Date(),
            quoteMailId: detailInfo.quoteMailId || '',
            receiversList: detailInfo.receivers ? detailInfo.receivers.split(';') : [],
            ccList: detailInfo.cc ? detailInfo.cc.split(';') : [],
            fileList: []
        }
        detailData.receiversList.pop();
        detailData.ccList.pop();
        const fileNames = detailInfo.attachName ? detailInfo.attachName.split(';') : [];
        const fileUrls = detailInfo.attach ? detailInfo.attach.split(',') : [];
        fileUrls.map( (item, index) => {
            const obj = { name: fileNames[index], url: item }
            detailData.fileList.push(obj);
        });
        return detailData
    };
    const getEmailDetail = () => {
        isLoading.value = true;
        const emailId = route.params.emailId || ''
        readEmailDetail({
            mailId: emailId,
            readFlg: 'N',
        }).then(res => {
            isLoading.value = false;
            const data = res.data || {}
            const detailInfo = dataReorganization(data || {});
            emailDetailInfo.value = detailInfo
        })
    }
    onMounted( () => {
        getEmailDetail();
    });
</script>
<style scoped lang="scss">
    .detail_container{
        padding: 20px;
        p{
            font-size: 14px;
            padding: 3px 0;
        }
        .file_list{
            padding-top: 5px;
            h3{
                font-size: 16px;
                margin-bottom: 10px;
            }
            .file_item{
                width: 480px;
                cursor: pointer;
                border-radius: 5px;
            }
            .file_item:hover{
                background-color: #f2f2f2;
            }
        }
    }
    .detail_title{
        display: flex;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .detail_item{
        display: flex;
        font-size: 14px;
        margin-bottom: 5px;
        span:first-child{ 
            min-width: 60px;line-height: 24px;
            text-align: justify;text-align-last: justify;
            text-justify: distribute-all-lines;
        }
        p{
            color: #666;
            line-height: 20px;
        }
    }
    .detail_content{
        margin: 10px 0;
        border: 1px solid #eee;
        border-radius: 5px;
        min-height: 340px;
    }
    .quote_email{
        margin-top: 15px;
        h3{
            font-size: 16px;
            margin-bottom: 10px;
        }
    }

</style>
  